<template>
  <div class="container">
    <div class="search-container">
      <div class="start-time" @click="handleShowSelectedDate(1)">{{queryParams.startTime}}</div>
      <div class="line">-</div>
      <div class="end-time" @click="handleShowSelectedDate(2)">{{queryParams.endTime}}</div>
    </div>
    <div class="list-container">
      <van-pull-refresh v-model="refreshing"  v-model:loading="loading" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
        >
          <van-cell v-for="item in list" :key="item" :is-link="item.hasLink" :title="item.rq" arrow-direction="right" :value="item.hasLink?'补录':''" @click="handleInputLog(item)"/>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-action-sheet v-model:show="show" :title="null" >
        <van-date-picker
          v-model="currentDate"
          title="选择日期"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="handleConfirmSelectDate"
          @cancel="handleCancelSelectDate"
        />
    </van-action-sheet>
  </div>
</template>

<script setup>

import { nextTick, onMounted, reactive, ref, toRaw } from 'vue'
import { listMyLogsApi } from '@/api/workLog.js'
import dayjs from 'dayjs'
import { getDatesBetween } from '@/utils/index.js'
import { useRouter } from 'vue-router'

const show = ref(false)
const title = ref('选择日期')
const queryParams = reactive({
  startTime: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
  endTime: dayjs().format('YYYY-MM-DD')
})
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const currentDate = ref(dayjs().format('YYYY-MM-DD').split('-'))
const minDate = ref(new Date(dayjs().subtract(1,'year').format('YYYY-MM-DD')))
const maxDate = ref(new Date(dayjs().format('YYYY-MM-DD')))
const dateType = ref(1)
const router = useRouter()

const handleInputLog = (date)=>{
  router.push(`/addWorkLog?date=${date}`)
}

const handleConfirmSelectDate = (e)=>{
  if(dateType.value===1){
    queryParams.startTime = e.selectedValues.join('-')
  }else if(dateType.value===2){
    queryParams.endTime = e.selectedValues.join('-')
  }
  show.value = false
  getList()
}
const handleCancelSelectDate = ()=>{
  show.value = false
}
const  handleShowSelectedDate = type=>{
  if(type===1){
    // 选择开始时间
    title.value = '选择开始日期'
    show.value = true
    // 最小值为本年度第一天
    currentDate.value = dayjs(queryParams.startTime).format('YYYY-MM-DD').split('-')
    // minDate.value = new Date(dayjs(queryParams.endTime).subtract(1, 'year').format('YYYY-MM-DD'))
    // maxDate.value = new Date(dayjs(queryParams.endTime).format('YYYY-MM-DD'))
  }else if(type===2){
    // 选择结束时间
    title.value = '选择结束日期'
    show.value = true
    currentDate.value = dayjs(queryParams.endTime).format('YYYY-MM-DD').split('-')
    // minDate.value = new Date(dayjs(queryParams.startTime).format('YYYY-MM-DD'))
    // maxDate.value = new Date(dayjs().format('YYYY-MM-DD'))
  }
}

const getList = () => {

  let params = toRaw(queryParams)
  listMyLogsApi(toRaw(params)).then(res => {

    let days = []
    if (res.data) {
      days = res.data.map(item => item.rq)
    }
    let allDays = getDatesBetween(dayjs(params.startTime), dayjs(params.endTime))
    let arr = allDays.filter(d => !days.includes(d))
    if (refreshing.value) {
      list.value = []
      refreshing.value = false
    }
    list.value = arr.map(d => {
      // 判断下是否能跳转补录
      let o = {
        rq:d,
        hasLink:dayjs().diff(d, 'day') < 2
      }
      return o
    })
    loading.value = false
    finished.value = true
  })
}

const onRefresh = () => {
  // 清空列表数据
  finished.value = false
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  getList()
}
const init = () => {
  // getList()
}

onMounted(() => {
  init()
})
</script>

<style scoped lang="less">
.container {
  width: 100vw;
  height: 100%;

  .search-container {
    width: 100%;
    background-color: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    .start-time,.end-time{
      width: 30%;
      text-align: center;
    }
  }

  .list-container {
    margin-top:10px;
    height: calc(100% - 60px);
    overflow-y: auto;
  }
}
.date-picker-box{
  height: 500px;
}
</style>